<template>
	<el-row :gutter="10">
		<el-col :span="12">
			<div class="grid-content bg-purple">
				<el-card class="box-card">
					<div slot="header" class="clearfix">
						<span>权限角色</span>
						<el-button style="float: right" type="primary" icon="el-icon-edit"
							@click="addDialogVisible = true" plain>
							添加角色</el-button>
					</div>
					<el-table :data="tableData" style="width: 100%" class="list">
						<el-table-column prop="id" label="#">
						</el-table-column>
						<el-table-column prop="name" label="分类">
							<template slot-scope="scope">
								<el-button type="primary" :disabled="scope.row.id==1" plain>{{scope.row.name}}
								</el-button>
							</template>
						</el-table-column>
						<el-table-column prop="operate" label="操作">
							<template slot-scope="scope">
								<el-button type="primary" @click="openEditDielog(scope.row)" :disabled="scope.row.id==1"
									icon="el-icon-edit" plain></el-button>
								<el-button type="danger" @click="handleRemove(scope.row.id)" :disabled="scope.row.id==1"
									icon="el-icon-delete" plain></el-button>
								<el-button type="danger" @click="loadMenu(scope.row.id,scope.row)"
									icon="el-icon-setting" plain></el-button>
							</template>
						</el-table-column>
					</el-table>
					<!-- 添加角色 -->
					<el-dialog title="添加角色" :visible.sync="addDialogVisible" @close="handleDielogClose('addForm')">
						<el-form :rules="rules" :model="addForm" ref="addForm">
							<el-form-item label="角色名称" prop="name">
								<el-input v-model="addForm.name"></el-input>
							</el-form-item>
						</el-form>
						<span slot="footer" class="dialog-footer">
							<el-button @click="addDialogVisible = false">取 消</el-button>
							<el-button @click="handleAdd" type="primary">确 定</el-button>
						</span>
					</el-dialog>
					<!-- 编辑角色 -->
					<el-dialog title="编辑角色" :visible.sync="editDialogVisible" @close="handleDielogClose('editForm')">
						<el-form :rules="rules" :model="editForm" ref="editForm">
							<el-form-item label="角色名称" prop="name">
								<el-input v-model="editForm.name"></el-input>
							</el-form-item>
						</el-form>
						<span slot="footer" class="dialog-footer">
							<el-button @click="editDialogVisible = false">取 消</el-button>
							<el-button @click="handleEdit" type="primary">保 存</el-button>
						</span>
					</el-dialog>
				</el-card>
			</div>
		</el-col>

		<el-col :span="12">
			<div class="grid-content bg-purple">
				<set-role v-if="showMenu" :roleId='roleId' :menu-form.sync="menuForm" ></set-role>
			</div>
		</el-col>
	</el-row>

</template>

<script>
	import { Role } from "@/api/";
	import SetRole from '@/components/SetRole.vue';

	export default {
		components: {
			SetRole
		},
		data() {
			return {
				showMenu: false,
				addDialogVisible: false,
				editDialogVisible: false,
				tableData: [],
				addForm: {
					name: ''
				},
				roleId:'',
				menuForm: [],
				editForm: {
					name: ''
				},
				rules: {
					name: [
						{ required: true, message: '请输入角色', trigger: "blur" }
					]
				}
			}
		},
		created() {
			this.loadList();
		},
		methods: {
			async loadList() {
				let { status, data } = await Role.list();
				if (status) {
					this.tableData = data;
				}
			},
			async loadMenu(id,item) {
				this.roleId=id;
				let { status, data } = await Role.config({ id });
				if (status) {
					this.menuForm = data;
					this.showMenu = true;
				}
			},
			handleAdd() {
				this.$refs.addForm.validate(async (valid) => {
					if (valid) {
						let { status } = await Role.add({ ...this.addForm });
						if (status) {
							this.loadList();
							this.$message.success('添加成功');
							this.addDialogVisible = false;
						} else {
							this.$message.error('添加失败')
						}
					}
				})
			},
			async openEditDielog(role) {
				this.editDialogVisible = true;
				this.editForm = { ...role };
			},
			handleRemove(id) {
				this.$confirm('此操作将永久删除分类，是否继续？', { type: 'warning' })
					.then(async () => {
						let { status } = await Role.remove({ id });
						if (status) {
							this.loadList();
							this.$message.success('删除成功');
							
						} else {
							this.$message.error('删除失败')
						}
					})
					.catch(() => {
						this.$message.info('取消成功')
					})
			},
			handleEdit() {
				this.$refs.editForm.validate(async (valid) => {
					let { status, msg } = await Role.edit({ ...this.editForm });
					if (status) {
						this.loadList();
						this.$message.success('编辑成功');
						this.editDialogVisible = false;
					} else {
						this.$message.error('编辑失败')
					}
				})
			},
			handleDielogClose(form) {
				this.$refs. [form].clearValidate();
			}

		}
	}
</script>

<style lang="less" scoped>
	.box-card {
		width: 100%;
	}
</style>
